<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">预招生管理</div>
          <el-input
            v-model="classSearchInput"
            placeholder="请输入姓名或手机号"
            style="width: 150px"
            class="className"
          ></el-input>
            <el-input
            v-model="classSearchInput1"
            placeholder="请输入学校名称"
            style="width: 150px"
            class="className"
          ></el-input>
          <div style="position: relative">
            <el-button @click="handleSearch" class="search">搜索</el-button>
            <img src="../../assets/images/搜索.png" class="searchImg" alt="" />
          </div>
        </div>
        <div class="header-right">
          <img src="../../assets/images/back.png" class="addmsg1" @click="getback">
          <img src="../../assets/images/加号.png" class="addmsg" @click="handleAdd" />
        </div>
      </div>
    </div>

    <div class="class-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="studentName" label="姓名" align="center" width="80px" />
        <el-table-column prop="sex" label="性别" align="center" :formatter="emptyValueFormatter" width="60px" />
        <el-table-column prop="preCourse" label="预报学科" align="center" :formatter="emptyValueFormatter" :min-width="190">
          <template #header>
            <el-select
              v-model="preCourseHeaderValue"
              placeholder="请选择"
              clearable
              style="width: 100%"
               class="selector1"
               @change="handlePreCourseFilter"
            >
              <el-option
                v-for="subject in subjectListAll"
                :key="subject.courseId"
                :label="subject.courseName"
                :value="subject.courseId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="preDate" label="预开班时间" align="center" :formatter="emptyValueFormatter" :min-width="110"/>
        <el-table-column prop="tel" label="电话" align="center" :formatter="emptyValueFormatter" :min-width="120"/>
        <el-table-column prop="saleName" label="销售顾问" align="center" width="144px">
          <template #header v-if="user.roleId == '1' || user.roleId == '2'">
            <el-select 
              v-model="selectedRoleId" 
              placeholder="全部" 
              clearable
              @change="handleRoleFilter"
              style="width: 120px"
              class="selector"
            >
            <el-option
              :key="0"
              label="全部"
              :value="-1"
                />
              <el-option
                v-for="option in saleList"
                :key="option.userId"
                :label="option.userName"
                :value="option.userId"
              />
            </el-select>
          </template>
          <template #default="scoped">
           {{ scoped.row.saleName ? scoped.row.saleName : '管理员' }}
          </template>
        </el-table-column>
        <el-table-column prop="emContact" label="紧急联系人" align="center" :formatter="emptyValueFormatter" width="100" />
        <el-table-column prop="emTel" label="紧急联系人电话" align="center" :formatter="emptyValueFormatter" :min-width="130"/>
        <el-table-column label="操作" align="center" :min-width="150">
          <template #default="scoped">
            <el-button link type="success" @click="() => handleEdit(scoped.row)">修改</el-button>
            <el-button link type="danger" @click="del(scoped.row)">删除</el-button>
            <el-button link type="primary" @click="detail2(scoped.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
          />
          <div> 
            每页
            <el-input-number
              v-model="pageSize"
              :min="1"
              :max="30"
              controls-position="right"
              @change="handleChange"
            />条
          </div>
      </div>
    </div>

    <!-- 添加预招生 -->
    <el-dialog v-model="dialogVisible" title="添加预招生" width="400px" :show-close="false">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="120px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="formData.studentName" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="预报学科" prop="courseId">
            <el-select v-model="formData.courseId" placeholder="请选择预报学科">
              <el-option v-for="subject in subjectList" :key="subject.courseId" :label="subject.courseName" :value="subject.courseId"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="预开班日期" prop="preDate">
            <el-date-picker
              v-model="formData.preDate"
              type="date"
              placeholder="请选择预开班日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="formData.tel" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="预毕业日期" prop="preGraduation">
            <el-date-picker
              v-model="formData.preGraduation"
              type="date"
              placeholder="请选择预毕业日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="紧急联系人电话" prop="emTel">
            <el-input v-model="formData.emTel" placeholder="请输入紧急联系人电话" />
          </el-form-item>
          <el-form-item label="紧急联系人" prop="emContact">
            <el-input v-model="formData.emContact" placeholder="请输入紧急联系人" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入家庭地址" />
          </el-form-item>
            <el-form-item label="学校和专业" prop="major">
            <el-input v-model="formData.major" placeholder="请输入学校和专业" />
          </el-form-item>
        </el-row>
        <el-row v-if="user.roleId == '1' || user.roleId == '2'">
          <el-form-item label="销售顾问" >
            <el-select 
              v-model="xiaoshouId" 
              placeholder="请选择销售顾问" 
              clearable
              @change="handleRoleFilter1"
            >
              <el-option
                v-for="option in saleList"
                :key="option.userId"
                :label="option.userName"
                :value="option.userId"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData.remarks"
             :autosize="{ minRows: 2, maxRows: 4 }"
              resize="none"
              style="width: 500px"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" class="confirm">确认</el-button>
      </template>
    </el-dialog>
    <!-- 修改预招生 -->
    <el-dialog v-model="dialogVisible2" title="修改预招生" width="400px" :show-close="false" style="margin-top:30px">
      <el-form
        :model="formData2"
        :rules="rules2"
        ref="formRef2"
        label-width="120px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="formData2.studentName" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="预报学科" prop="courseId">
            <el-select v-model="formData2.courseId" placeholder="请选择预报学科">
              <el-option v-for="subject in subjectList" :key="subject.courseId" :label="subject.courseName" :value="subject.courseId"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData2.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="预开班日期" prop="preDate">
            <el-date-picker
              v-model="formData2.preDate"
              type="date"
              placeholder="请选择预开班日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="formData2.tel" />
          </el-form-item>
          <el-form-item label="预毕业日期" prop="preGraduation">
            <el-date-picker
              v-model="formData2.preGraduation"
              type="date"
              placeholder="请选择预毕业日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="紧急联系人" prop="emContact">
            <el-input v-model="formData2.emContact" placeholder="请输入紧急联系人" />
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="emTel">
            <el-input v-model="formData2.emTel"  placeholder="请输入紧急联系人电话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="formData2.address"  placeholder="请输入家庭地址"/>
          </el-form-item>
          <el-form-item label="学校和专业" prop="major">
            <el-input v-model="formData2.major"  placeholder="请输入学校和专业" />
          </el-form-item>
        </el-row>
        <el-row v-if="user.roleId == '1' || user.roleId == '2'">
          <el-form-item label="销售顾问" >
            <el-select 
              v-model="formData2.saleId" 
              placeholder="请选择销售顾问" 
              clearable
              @change="handleRoleFilter1"
            >
              <el-option
                v-for="option in saleList"
                :key="option.userId"
                :label="option.userName"
                :value="option.userId"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row v-if="formData2.remarks">
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData2.remarks"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
              :disabled="!!formData2.remarks"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="formData2.remarks ? '新增备注' : '备注'" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData2.remarks1"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible2 = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleEdit1" class="confirm">修改</el-button>
      </template>
    </el-dialog>
    <el-drawer  v-model="dialogVisible3" title="预招生详情" size="700" :show-close="false" style="background-color:#F0F8FF;">
       <el-row>
          <el-col :span="12">姓名：{{ formData3.studentName }}</el-col>
          <el-col :span="12">性别：{{ formData3.sex }}</el-col>
       </el-row>
       <el-row>
        <el-col :span="12">预开班时间：{{ formData3.preDate }}</el-col>
        <el-col :span="12">预毕业时间：{{ formData3.preGraduation }}</el-col>
       </el-row>
       <el-row>
          <el-col :span="12">电话：{{ formData3.tel }}</el-col>
          <el-col :span="12">学校和专业：{{ formData3.major }}</el-col>
       </el-row>
       <el-row>
        <el-col :span="12">紧急联系人：{{ formData3.emContact }}</el-col>
        <el-col :span="12">紧急联系人电话：{{ formData3.emTel }}</el-col>
       </el-row>
       <el-row>
          <el-col :span="12">预报学科：{{ formData3.preCourse }}</el-col>
          <el-col :span="12">销售顾问：{{ formData3.saleName ?  formData3.saleName : '管理员'  }}</el-col>
         
       </el-row>
       <el-row>
           <el-col :span="12">家庭地址：{{ formData3.address }}</el-col>
           <el-col :span="12">报名时间：{{ formData3.transformDate || formData3.createTime.substring(0,10) }}</el-col>
       </el-row>
       <el-row style="display:flex">
           <el-col :span="2" >备注：</el-col>
           <el-col :span="22" class="content2">{{ formData3.remarks }}</el-col>
       </el-row>

      <template #footer>
        <el-button @click="dialogVisible3 = false" class="cancel">关闭</el-button>
      </template>
    </el-drawer >
  </div>
</template>
  
  <script setup>
import { ref } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import { onMounted } from 'vue'
// 导入
import { getPreStudent, modifyPreStudent,addPreStudent,deletePreStudent,getSubject,getStudentById,getSaleList} from '../api/PreStudent'
const tableData = ref([])
// 总条目数
const total = ref(0)
// 每页显示的条目数量
const pageSize = ref(7)
// 当前页码
const currentPage = ref(1)
//搜索
const classSearchInput = ref('')
const classSearchInput1 = ref('')
//本地存储
const user = JSON.parse(localStorage.getItem('user'))
//获取所有学科
const subjectList = ref([])
const subjectListAll = ref([])
const preCourseHeaderValue = ref('全部')
const dialogVisible3 = ref(false)
const formData3 = ref({})
//销售列表
const saleList = ref([])
// 筛选条件
const selectedRoleId = ref(-1)
const xiaoshouId = ref(0)
const fetchSubject = () => {
  const data = {
  }
  getSubject('courseList', data, 'post').then((res) => {
    subjectList.value = [...res.dataset.courseList];
    subjectListAll.value = [...res.dataset.courseList];
    //添加一个全部
    subjectListAll.value.unshift({
      courseId: 0,
      courseName: '全部',
    })
    console.log(1,res.dataset.courseList);
    console.log(2,subjectList.value);
    console.log(3,subjectListAll.value);
    
    
    
  })
}
// 调接口获取数据
const fetchData = (pageIndex, pageSize,search) => {
  const data = {
    pageIndex,
    pageSize,
    search,
  }
  if(classSearchInput1.value){
    data.major = classSearchInput1.value
  }
  const inputValue = search.trim();
  const isPhoneNumber = /^\d+$/.test(inputValue);
  if (isPhoneNumber) {
    data.tel = inputValue;
    data.search = '';
  }else{
    data.search = inputValue;
  }

  if(user.roleId == '5'){
    data.userId = user.userId
  }
  if(preCourseHeaderValue.value != '0' && preCourseHeaderValue.value!= '全部'){
    data.courseId = preCourseHeaderValue.value
  }
  getPreStudent('studentList', data, 'post').then((res) => {
    tableData.value = res.dataset.studentList
    // 更新总条目数
    total.value = res.dataset.pageCount * pageSize
  })
}
// 页面加载时获取第一页数据
onMounted(() => {
  //添加类名
  document.querySelector('.one').classList.add('oneafter')
  fetchData(currentPage.value, pageSize.value,classSearchInput.value)
  fetchSubject();
  fetchDataSaleList();
})
// 处理当前页码的变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  // 重新获取数据
  if(selectedRoleId.value == -1){
    fetchData(currentPage.value, pageSize.value,classSearchInput.value)
  }else{
    const data = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    search: classSearchInput.value,
  }
    data.userId = selectedRoleId.value
  getPreStudent('studentList', data, 'post').then((res) => {
    tableData.value = res.dataset.studentList
    // 更新总条目数
    total.value = res.dataset.pageCount * pageSize.value
  })
  }
  
}
// 数据为空显示---
const emptyValueFormatter = (row, column) => {
  const value = row[column.property];
  return value === null || value === undefined || value === '' ? '---' : value;
};



const handleSearch = () => {
  // 搜索逻辑
  //当前页为1
  currentPage.value = 1
  // 重新获取数据
  fetchData(currentPage.value, pageSize.value,classSearchInput.value)
}

//获取销售列表接口
function fetchDataSaleList() {
  let data = {}
  getSaleList('saleName', data,'post').then((res) => {
    if (res.code == 200) {
      saleList.value = res.dataset
      //加一项是管理员的加在第一项

      saleList.value.unshift({
        userId: 0,
        userName: '管理员',
      })
    }
  })
}
// 添加预招生模态框
// 新增：模态框显示状态
const dialogVisible = ref(false)
// 新增：表单数据
const formData = ref({
  studentName: '',
  sex: '',
  preCourse: '',
  preDate: '',
  preGraduation: '',
  tel: '',
  address: '',
  emContact: '',
  emTel: '',
  major: '',
  remarks: '',
  courseId:''
})
// 新增：表单引用
const formRef = ref(null)
// 新增：自定义验证规则

// 新增：表单验证规则
const rules = ref({
  studentName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  courseId: [{ required: true, message: '请输入预报学科', trigger: 'blur' }],
  tel: [{ required: true, message: '请输入电话', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }

  ],
  emTel: [
    { 
      validator: (rule, value, callback) => {
        if (value && !/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      },
      trigger:  'blur'
    }
  ],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  major: [{ required: true, message: '请输入学校和专业', trigger: 'blur' }],
})


// 新增：点击添加预招生按钮方法
const handleAdd = () => {
  if(formRef.value){
    formRef.value.clearValidate(); 
    formRef.value.resetFields(); // 重置表单数据到初始状态，包括清除校验结果和输入的值
  }
  xiaoshouId.value = 0;
  // 清空表单数据
  formData.value = {
    studentName: '',
    sex: '',
    preCourse: '',
    preDate: '',
    preGraduation: '',
    tel: '',
    address: '',
    emContact: '',
    emTel: '',
    major: '',
    remarks: ''
  }
  dialogVisible.value = true;
}

// 新增：点击确认按钮方法
const handleConfirm = () => {
  // 提交表单逻辑
  formRef.value.validate(async(valid) => {
    if (valid) {
      //新增数据
      let data = {
        studentName: formData.value.studentName,
        sex: formData.value.sex,
        preCourse: subjectList.value.find(item => item.courseId == formData.value.courseId).courseName,
        tel: formData.value.tel,
        major: formData.value.major,
        courseId:formData.value.courseId,
      }
      if(formData.value.preDate){
        data.preDate = formData.value.preDate
      }
      if(formData.value.preGraduation){
        data.preGraduation = formData.value.preGraduation
      }
      if(formData.value.remarks){
        data.remarks = formData.value.remarks
      }
      if(formData.value.emTel){
        data.emTel = formData.value.emTel
      }
      if(formData.value.emContact){
        data.emContact = formData.value.emContact
      }
      if(formData.value.address){
        data.address = formData.value.address
      }
      if(user.roleId == '1' || user.roleId == '2'){
        data.saleId = xiaoshouId.value;   
      }
      if(user.roleId == '5'){
          data.saleId = user.userId;
      }
     const res = await addPreStudent('addPreStudent', data, 'post');
     if(res.code == '200'){
        ElMessage.success('添加成功');
         // 重新获取数据
      fetchData(currentPage.value, pageSize.value,classSearchInput.value)
      // 关闭模态框
      dialogVisible.value = false
            //清空表单数据
        formData.value = {
        studentName: '',
        sex: '',
        preCourse: '',
        preDate: '',
        tel: '',
        emContact: '',
        emTel: '',
        address: '',
        preGraduation: '',
      }
     }else{
        ElMessage.error('添加失败，手机号重复');
     }
    
     
    }
  })
}

// 修改预招生模态框
// 修改：模态框显示状态
const dialogVisible2 = ref(false)
// 修改：表单数据
const formData2 = ref({
  studentId: '',
  studentName: '',
  sex: '',
  preCourse: '',
  preDate: '',
  tel: '',
  emContact: '',
  emTel: '',
  address: '',
  preGraduation: '',
  major: '',
  remarks: '',
  remarks1:'',
  courseId:'',
})
// 修改：表单引用
const formRef2 = ref(null)
// 修改：自定义验证规则

// 修改：表单验证规则
const rules2 = ref({
  studentName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  courseId: [{ required: true, message: '请输入班级', trigger: 'blur' }],
  tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  emTel: [
    { 
      validator: (rule, value, callback) => {
        if (value && !/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      },
      trigger:  'blur'
    }
  ],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  major: [{ required: true, message: '请输入学校和专业', trigger: 'blur' }],
})
// 修改：点击修改按钮方法
const handleEdit = (row) => {
  if(formRef2.value){
    formRef2.value.clearValidate()
  }
  //获取数据
  getStudentById('preStudentById', { studentId: row.studentId }, 'post').then((res) => {
     // 填充表单数据
     //解构
     const { studentId,studentName,sex,preCourse,preDate,tel,emContact,emTel,address,preGraduation,major,remarks,saleId,courseId} = res.dataset;
     formData2.value = {
       studentId,
       studentName,
       sex,
       preCourse,
       preDate,
       tel,
       emContact,
       emTel,
       address,
       preGraduation,
       major,
       remarks,
       saleId,
       courseId
     }
  })
  dialogVisible2.value = true
}

//调修改接口
async function handleEditStundent(data) {
  return modifyPreStudent('updatePreStudent', data, 'post').then((res) => {
    ElMessage.success('修改成功')
  })
}

// 修改：点击确认按钮方法
const handleEdit1 = () => {
 formRef2.value.validate(async(valid) => {
    if (valid) {
      // 提交表单逻辑
      let modeityData = {
        studentId: formData2.value.studentId,
        studentName: formData2.value.studentName,
        sex: formData2.value.sex,
        preCourse: subjectList.value.find(item => item.courseId == formData2.value.courseId).courseName,
        preDate: formData2.value.preDate,
        tel: formData2.value.tel,
        emContact: formData2.value.emContact,
        emTel: formData2.value.emTel,
        address: formData2.value.address,
        preGraduation: formData2.value.preGraduation,
        major: formData2.value.major,
        saleId: formData2.value.saleId,
        courseId:formData2.value.courseId
      }
      if(formData2.value.remarks1){
        if(formData2.value.remarks){
          modeityData.remarks = formData2.value.remarks + '\n' + formData2.value.remarks1;
        }else{
          modeityData.remarks = formData2.value.remarks1;
        }
      }else{
        modeityData.remarks = formData2.value.remarks;
      }
      await handleEditStundent(modeityData)
      // 关闭模态框
      dialogVisible2.value = false
      //重新获取数据
      fetchData(currentPage.value, pageSize.value,classSearchInput.value)
    
    }
  })
}

// 删除
function del(row) {
 // 使用 ElMessageBox 弹出确认提示框
 ElMessageBox.confirm('确定要删除该预招生信息吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击确定，调用删除接口
    deletePreStudent('deletePreStudent', { studentId: row.studentId }, 'post').then((res) => {
      ElMessage.success('删除成功');
      // 重新获取数据
      fetchData(currentPage.value, pageSize.value, classSearchInput.value);
    });
  }).catch(() => {
    // 用户点击取消，不做任何操作
    ElMessage.info('已取消删除');
  });
}

function detail2(row) {
//获取视口宽度
 console.log('视口高度',window.innerHeight);
 //el-hedader高度
 console.log('el-header高度',document.querySelector('.el-header').offsetHeight);
//el-drawer高度
  console.log('el-drawer高度',document.querySelector('.el-overlay').offsetHeight);
 

  dialogVisible3.value = true;
  formData3.value = row
}

function getback() {
  window.history.go(-1)
}

//下拉框变化
function handleRoleFilter() {
  if(selectedRoleId.value == -1){
    //当前页为1
    currentPage.value = 1
    fetchData(currentPage.value, pageSize.value,classSearchInput.value)
  }else{
    //当前页为1
    currentPage.value = 1
    const data = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    search: classSearchInput.value,
  }
    data.userId = selectedRoleId.value
  getPreStudent('studentList', data, 'post').then((res) => {
    tableData.value = res.dataset.studentList
    // 更新总条目数
    total.value = res.dataset.pageCount * pageSize.value
  })
  }
}

function handleChange(){
  if(selectedRoleId.value == -1){
    //当前页为1
    currentPage.value = 1
    fetchData(currentPage.value, pageSize.value,classSearchInput.value)
  }else{
    //当前页为1
    currentPage.value = 1
    const data = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    search: classSearchInput.value,
  }
    data.userId = selectedRoleId.value
  getPreStudent('studentList', data, 'post').then((res) => {
    tableData.value = res.dataset.studentList
    // 更新总条目数
    total.value = res.dataset.pageCount * pageSize.value
  })
  }
}

function handleRoleFilter1(){
  console.log(xiaoshouId.value);
  
}

function handlePreCourseFilter(){
  //当前页为1
  currentPage.value = 1
  fetchData(currentPage.value, pageSize.value,classSearchInput.value)
}



</script>
  
  <style scoped>
  .addmsg1{
  width: 25px;
  height: 25px;
  margin-right: 20px;
  cursor:pointer;
}
.class {
  width: 90%;
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* 头部左侧 */
.header-left {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.line {
  width: 2px;
  height: 20px;
  background-color: #007bff;
}
.title {
  padding-left: 10px;
  font-size: 20px;
  margin-right: 20px;
}
.className {
  margin-right: 10px;
}
.line2 {
  width: 10px;
  height: 2px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #9b9b9b;
}
:deep(.className .el-input__wrapper){
  border-radius: 12px !important;
}
.search {
  background-color: #0f6ab1;
  color: #fff;
  border: none;
  margin-left: 10px;
  border-radius: 16px;
  padding: 0;
  padding-right: 15px;
  padding-left: 36px;
}
.searchImg {
  position: absolute;
  top: 8px;
  left: 25px;
}
/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.addmsg {
  width: 25px;
  height: 25px;
}

/* 表格区域 */
.class-content {
  width: 90%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 表格数据 */
:deep(.el-table thead th) {
  background-color: #fbfcff !important;
}
:deep(.el-table .cell) {
  color: black;
}
:deep(.details1) {
  margin-left: 55px;
}
/* 分页 */
.page {
  margin-top: 50px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
/* 分页背景色 */
:deep(.el-pager .is-active) {
  background-color: #0f6ab1 !important;
}

/* 模态框 */
:deep(.el-overlay .el-overlay-dialog) {
  position: absolute;
}
:deep(.el-overlay) {
  position: absolute;
}
:deep(.el-dialog) {
  padding: 0px;
  width: 800px;
}
:deep(.el-dialog header span) {
  display: inline-block;
  width: 100%;
  background-color: #0f6ab1;
  height: 40px;
  color: white;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
}
:deep(.el-select) {
  width: 200px;
}
:deep(.el-dialog__footer) {
  text-align: center;
  padding-bottom: 20px;
}
:deep(.confirm) {
  margin-left: 50px;
  background-color: #0f6ab1;
}
:deep(.cancel) {
  background-color: #0f6ab1;
  color: white;
}
:deep(.el-dialog__body){
  display: flex;
  justify-content: center;
}
:deep(.el-drawer header) {
  background-color: #0f6ab1;
  margin-bottom: 0;
  padding-bottom: 20px;
}
:deep(.el-drawer header span) {
  color: white;
}

:deep(.el-drawer__header span) {
  text-align: center;
  color: black;
  font-size: 20px;
}
:deep(.el-drawer .el-drawer__body .el-row){
  margin-top: 15px !important;
}
.content2 {
  width: 550px;
  height: 290px;
  overflow-y: auto;
  white-space: pre-line;
  word-break: break-all;
}
:deep(.el-textarea__inner) {
  min-height: 50px !important;
  max-height: 100px !important;
  overflow-y: auto !important;
}

:deep(.selector .el-select__wrapper){
  border-radius: 12px !important;
}
:deep(.selector1 .el-select__wrapper){
  border-radius: 12px !important;
}
</style>